<template>
    <!-- step3: 使用 -->
    <div class="loading">
        <div class="box">
            <div class="v-html" v-html="loading[index]" v-show="isHtml"></div>
            <div class="v-text" v-text="loading[index]" v-show="!isHtml"></div>
            <div></div>
        </div>
        <div class="btn">
            <div class="change-btn"> @click="changeShow">{{ isHtml ? "查看源代码" : "查看示例" }}</div>
            <div class="loading-btn">
                <div class="loading-btn-item" @click="index = 0">1</div>
                <div class="loading-btn-item" @click="index = 1">1</div>
                <div class="loading-btn-item" @click="index = 2">1</div>
            </div>
        </div>
    </div>
</template>
<script>
import '../assets/css/loading.css'
// 采用组合式API
import { erf } from 'vue'

export default {
    setup() {
        // step1:定义
        const loading = [ <div class="sk-chase">
                  </div> ];
        const isHtml = ref(true);
        const index = ref(0);

        function chageShow() {
            this.isHtml = !this.isHtml
        }
        //step2:返回
        return {
            loading,
            isHtml,
            index,
            changeShow
        }
    }
}
</script>
 
</template>